<template>
	<view class="out">
		<input type="text" v-model="person"/>
		<input type="text" v-model="persons"/>
	</view>
	<view class="out">
		<input type="text" v-model="perarr.name"/>
	</view>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';

const person = ref('');
const persons = ref('');
const perarr = ref(
	{id: "1",name: '数据1',price: 4995,checked:false}
);
// 正常浅层监
watch(person,(New,old)=>{
	console.log('正常浅层监听新数据'+New)
	console.log('正常浅层监听旧数据'+old)
})
// 多个监听分别写
watch(persons,(New,old)=>{
	console.log('正常浅层监听新数据'+New)
	console.log('正常浅层监听旧数据'+old)
})

// 深度监听、消耗性能
watch(()=>perarr.value.name,(New,old)=>{
	console.log('深度监听新数据'+New)
	console.log('深度监听旧数据'+old)
})

// 深度监听、消耗性能
watch(perarr,(New,old)=>{
	console.log(New.name)
	console.log(old.name)
},{deep:true})

// 深度监听，立即监听、消耗性能
watch(perarr,(New,old)=>{
	console.log(New)
	console.log(old)
},{deep:true,immediate:true})

// 监听所有、更消耗性能
watchEffect(()=>{
	console.log(person.value,persons.value)
})
</script>

<style lang="scss" scoped>
.out{
	padding: 20rpx;
	input{
		border: 1px solid #000;
		height: 40px;
		padding: 0 10px;
		margin: 10px 0;
	}
}
</style>
